<template>
	<view>
		<!-- 退款售后流程 -->
		<view style="background-color: #fff; padding: 0 30upx;margin-top: 20upx;color: #CCCCCC;">
			
			<rich-text :nodes="content1"></rich-text>
			<!-- <view>
				<view>退款退货申请流程：</view>
				<view>1、发起退款退货申请</view>
				<view>2、退货需将退货商品邮寄至商家指定地址，并在系统内输入快递单号</view>
				<view>3、商家收货后确认无误4、退款到您的账户</view>
			</view> -->
		</view>
		<!-- 退货地址 -->
		<view v-if="refund.status >= 3" style="background-color: #fff;padding: 0 30upx;margin-top: 20upx;">
			<view>
				退货地址
			</view>
			<view style="color: #ccc;">
				{{refund.refundaddress.province}}
				{{refund.refundaddress.city}}
				{{refund.refundaddress.area}}
				{{refund.refundaddress.address}}
			</view>
			<view style="color: #ccc;">
				{{refund.refundaddress.name}}
				{{refund.refundaddress.mobile}}
				{{refund.refundaddress.tel}}
			</view>
			<view style="border-bottom: 1upx solid #eee;" v-if="refund.message">
				卖家留言
			</view>
			<view style="color: #FF3333;">
				{{refund.message}}
			</view>
		</view>
		
		<!-- 退款换货状态 -->
		<view style="background-color: #fff;height: 80upx;line-height: 80upx;padding: 0 30upx;margin-top: 20upx;" v-if="refund.rtype == 1 || refund.rtype == 2" @click="jumptogo">
			<text style="display: inline-block;" v-if="refund.rtype == 1">退货状态</text>
			<text style="display: inline-block;" v-if="refund.rtype != 1">换货状态</text>
			<text style="display: inline-block;padding-left: 360upx;color: #ccc;" v-if="refund.status == 3">需填写快递单号</text>
			<text style="display: inline-block;padding-left: 360upx;color: #ccc;" v-if="refund.status == 4">等待商家确认</text>
			<text style="display: inline-block;padding-left: 360upx;color: #ccc;" v-if="refund.status == 5">商家已经发货</text>
			
		</view>
		<view v-if="refund.rtype == 1 || refund.rtype == 2 && refund.rexpresssn">
			<view v-if="refund.rtype== 1" style="background-color: #fff;height: 80upx;line-height: 80upx;padding: 0 30upx;border-top: 2upx solid #eeeeee;" >
				退货快递公司 <text style="margin-left: 50upx;">{{refund.rexpresscom}}</text>
			</view>
			<view v-if="refund.rtype== 1" style="background-color: #fff;height: 80upx;line-height: 80upx;padding: 0 30upx;border-top: 2upx solid #eeeeee;" >
				退货快递单号 <text style="margin-left: 50upx;">{{refund.rexpresssn}}</text>
			</view>
			<view v-if="refund.rtype!= 1" style="background-color: #fff;height: 80upx;line-height: 80upx;padding: 0 30upx;border-top: 2upx solid #eeeeee;" >
				换货快递公司<text style="margin-left: 50upx;">{{refund.rexpresscom}}</text>
			</view>
			<view v-if="refund.rtype!= 1" style="background-color: #fff;height: 80upx;line-height: 80upx;padding: 0 30upx;border-top: 2upx solid #eeeeee;" >
				换货快递单号<text style="margin-left: 50upx;">{{refund.rexpresssn}}</text>
			</view>
		</view>
		
		
		<!-- 协商详情 -->
		<!-- <view v-if="refund.status >= 3" style="margin: 10upx 40upx 0;color: #888888;">协商详情</view> -->
		<view style="height: 110upx;width: 100%;margin-top: 20upx;">
			<view style="width: auto;height: 100upx;line-height: 100upx;background-color: #FFFFFF;border-bottom: 1upx solid #eeeeee;position: relative;">
				<text style="color: #333333;display: inline-block;margin: 0upx 40upx;">{{chulifangshi}}</text>
				<text style="display: inline-block;margin: 0upx 20upx;" @click="hid_show">{{reason}}</text>
				<view style="position: absolute;top: 40upx;left: 400upx;background-color: #ffffff;border: 1upx solid #EEEEEE;z-index: 9999;" v-if="status == 2" :style="{display: show_none}">
					<view v-for="(arr,index) in arrs" :key=index @click.stop="show_hid(index)" style="height:50upx;line-height:50upx;color:#888888;font-size: 30upx;">
						{{arr}}
					</view>
				</view>
			</view>
			<view >
				
			</view>
			<view style="width: auto;height: 100upx;line-height: 100upx;background-color: #FFFFFF;border-bottom: 1upx solid #eeeeee;position: relative;">
				<text style="color: #333333;display: inline-block;margin: 0upx 40upx;">{{yuanyin}}</text>
				<text style="display: inline-block;margin: 0upx 20upx;" @click="hid_show1">{{reason1 }}</text>
				<view style="position: absolute;top: 40upx;left: 400upx;background-color: #ffffff;border: 1upx solid #EEEEEE;z-index: 9999;" :style="{display: show_none1}">
					<view v-for="(arr,index) in arrs1" :key=index @click.stop="show_hid1(index)" style="height:50upx;line-height:50upx;color:#888888;font-size: 30upx;">
						{{arr}}
					</view>
				</view>
			</view>
			<view style="width: auto;height: 100upx;line-height: 100upx;background-color: #FFFFFF;border-bottom: 1upx solid #eeeeee;">
				<text style="color: #333333;display: inline-block;margin: 0upx 40upx;">{{shuoming}}</text>
				<input style="line-height: 100upx;vertical-align: middle;height: 100upx;line-height: 100upx;display: inline-block;margin: 0upx 20upx; width: 400upx;" placeholder="亲~在这里说明原因哦" placeholder-style="line-height: 100upx;" @input="shuomingIpt" />
			</view>
			<view style="width: auto;height: 100upx;line-height: 100upx;background-color: #FFFFFF;border-bottom: 1upx solid #eeeeee;"  v-if="index != 1">
				<text style="color: #333333;display: inline-block;margin: 0upx 40upx;">退款金额</text>
				<text style="display: inline-block;margin: 0upx 20upx;">{{res.price}}</text>
			</view>
				
			<view style="width: auto;height: 100upx;line-height: 100upx;background-color: #FFFFFF;border-bottom: 1upx solid #eeeeee;" @click="chooseImage" >
				<text style="color: #333333;display: inline-block;margin: 0upx 40upx;">上传凭证</text>
				<view v-for="(item,index) in imagess" :key="index" style="display: inline-block;margin: 0upx 20upx 0upx;width: 60upx;height: 60upx;vertical-align: middle;">
					<image :src="item" style="display: inline-block;margin: 0upx 20upx;width: 60upx;height: 60upx;"/>
				</view>
			</view>
			<view style="width: auto;height: 100upx;background-color: #FFFFFF;padding: 10upx 20upx;color: #cccccc;" v-if="index != 1">
				<text>提示:您可退款的金额为</text>
				<text style="color: #ff5500;">¥:{{res.price}}</text>
				<!-- <text>(其中素米返还:</text>
				<text style="color: #ff5500;">{{res.jindou}}</text>) -->
			</view>
			<view style="text-align: right; width: 100%;height: 100upx;line-height: 100upx;background-color: #FFFFFF;position: fixed;bottom: 0upx;left: 0upx;">
				<button type="primary" style="display: inline-block;margin: 0upx 20upx;background-color: #FFFFFF;color: #000;border: 1upx solid #eeeeee;" @click="submit" v-if="res.refundstate == 0">提交申请</button>
				<button type="primary" style="display: inline-block;margin: 0upx 20upx;background-color: #FFFFFF;color: #000;border: 1upx solid #eeeeee;"  v-if="refund.status == 3 || refund.status == 4 && !res.express" @click="express_submit">填写快递单号</button>
				<button type="primary" style="display: inline-block;margin: 0upx 20upx;background-color: #FFFFFF;color: #000;border: 1upx solid #eeeeee;"  v-if="refund.status == 3 || refund.status == 4 && refund.express" @click="express_submit">修改快递单号</button>
				<button type="primary" style="display: inline-block;margin: 0upx 20upx;background-color: #FFFFFF;color: #000;border: 1upx solid #eeeeee;"  v-if="refund.status == 0" @click="express_submit">修改申请</button>
				<button type="primary" style="display: inline-block;margin: 0upx 20upx;background-color: #FFFFFF;color: #000;border: 1upx solid #eeeeee;" @click="del_apply" v-if="refund.status != 5">取消申请</button>
				<button type="primary" style="display: inline-block;margin: 0upx 20upx;background-color: #FFFFFF;color: #000;border: 1upx solid #eeeeee;" v-if="refund.status == 5 && refund.rtype == 2" @click="sure_get">确认收到换货物品</button>
				<button type="primary" style="display: inline-block;margin: 0upx 20upx;background-color: #FFFFFF;color: #000;border: 1upx solid #eeeeee;" v-if="refund.status == 5 && refund.rtype == 2" @click="see_chg">查看换货物流</button>
				<button type="primary" style="display: inline-block;margin: 0upx 20upx;background-color: #FFFFFF;color: #000;border: 1upx solid #eeeeee;" v-if="refund.status == 4" @click="jumptogo">修改快递单号</button>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res:[],
				openid:'',
				reason:'退款(仅退款不退货)',
				reason1:'不想要了',
				status:'', //2,待收货shouhou,1,待发货tuikuan
				index: 0,
				show_none: 'none',
				show_none1: 'none',
				arrs:['退款(仅退款不退货)','退货退款','换货'],
				arrs1:['不想要了','卖家缺货','拍错了/订单信息错误','其他'],
				chulifangshi:'处理方式',
				yuanyin:'退款原因',
				shuoming:'退款说明',
				shuoming_ctn:'',
				avatar:'' ,//图像
				imagess:['../../../static/upload_img.png'],
				// imgurl:'',
				content:'',
				content1:'',
				refund:'',
				refundid:''
			};
		},
		onLoad:function(e){
			this.orderid = e.id
			this.status = e.status
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		methods:{
			onBackPress(event){
				uni.reLaunch({
					url: '../detail/detail?id=' + this.orderid
				})
			},
			setAjax(){
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.refund&app=1',
					method: 'POST',
					data: {
						openid:this.openid,
						id: this.orderid
						},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						uni.hideLoading()
						this.res = res.data.order
						this.refund = res.data.refund
						this.refundid = res.data.refund.id
						if (res.data.refund.images) {
							this.imagess = res.data.refund.images
						}
						this.shuoming_ctn = res.data.refund.content
						if(res.data.refund.rtype) {
							this.reason1 = res.data.refund.reason
							this.index = res.data.refund.rtype
						}
						if(res.data.refund.rtype == "1") {
							this.reason = '退货退款'
						}
						if(res.data.refund.rtype == 2) {
							this.reason = '换货'
						}
						if(res.data.refund.rtype == 0) {
							this.reason = '退款(仅退款不退货)'
						}
						if(res.data.refund.rtype == 0) {
							if (res.data.refund.status == 0) {
								// this.content = '商家已经通过退款申请'
								this.content1 = '退款申请流程： <br>1、发起退款申请<br>2、商家确认后退款到您的账户如果商家未处理：请及时与商家联系'
							}
						}
						if (res.data.refund.rtype == 1) {
							this.content1 = '退款退货申请流程：<br>1、发起退款退货申请<br>2、退货需将退货商品邮寄至商家指定地址，并在系统内输入快递单号<br>3、商家收货后确认无误<br>4、退款到您的账户'
						}
						if (res.data.refund.rtype == 2) {
							this.content1 = '换货申请流程：<br>1、发起换货申请，并把快递单号录入系统<br>2、将需要换货的商品邮寄至商家指定地址，并在系统内输入快递单号<br>3、商家确认后货后重新发出商品<br>4、签收确认商品'
						}
						// if(res.data.refund.rtype == 1 || res.data.refund.rtype == 2) {
							
						// }
						if(this.refund.status >= 3) {
							
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			chooseImage(){
				var _this = this
				uni.chooseImage({
				    count: 2, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
							let file = res.tempFilePaths
							var images = []
							var img = ''
							for(var i = 0; i<res.tempFilePaths.length; i++) {
								uni.uploadFile({
									url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
									//仅为示例，非真实的接口地址
									filePath: file[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										images.push(JSON.parse(res.data).url)
										_this.imagess = images
										_this.avatar = _this.imagess
										console.log(_this.imagess)
										// img = img + JSON.parse(res.data).url + ';'
										// _this.imgurl = img
									}
								});
							}
				    }
				});
				// console.log(this.imagess)
			},
			submit(){
				// console.log(this.imagess)
				var _this = this
				// this.index += 1
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.refund.submit&app=1',
					method: 'POST',
					data: {
						id: this.orderid,
						// rtype: this.reason,
						rtype: this.index,
						content: this.shuoming_ctn,
						reason: this.reason1,
						images: this.imagess,
						price: this.res.price,
						openid:this.openid,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						var _res = res
						if(res.data.status == 1) {
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 1000,
								success() {
									_this.setAjax()
									
								}
							})
						} else {
							uni.showToast({
								title: '提交失败',
								icon: 'none',
								duration: 1000,
								success() {
									_this.setAjax()
									
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			del_apply() {
				var _this = this
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.refund.cancel&app=1',
					method: 'POST',
					data: {
						openid:this.openid,
						id: this.orderid
						},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						if(res.data.status == 0) {
							uni.showToast({
								title: res.data.result.message,
								icon:"none"
							})
							return
						}
						uni.showToast({
							title: '取消申请成功',
							icon:"none",
							success() {
								setTimeout(function() {
									uni.reLaunch({
										url: '../detail/detail?id=' + _this.orderid
									})
								}, 1500);
							}
						})
					},
					fail: () => {},
					complete: () => {}
				});
				
			},
			sure_get() {
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.refund.receive&app=1',
					method: 'POST',
					data: {
						openid:this.openid,
						id: this.orderid,
						refundid: this.refundid
						},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						if(res.data.status == 0) {
							uni.showToast({
								title: res.data.result.message,
								icon:"none"
							})
							return
						}
						uni.reLaunch({
							url: '../detail/detail?id=' + this.orderid
						})
					},
					fail: () => {},
					complete: () => {}
				});
			},
			see_chg() {
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.refund.refundexpress&app=1',
					method: 'POST',
					data: {
						openid:this.openid,
						id: this.orderid,
						express: this.refund.rexpress,
						expresscom: this.refund.expresscom,
						expresssn: this.refund.rexpresssn
						},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						if(res.data.status == 0) {
							uni.showToast({
								title: res.data.result.message,
								icon:"none"
							})
							return
						}
						uni.reLaunch({
							url: '../express/express?id=' + this.orderid
						})
					},
					fail: () => {},
					complete: () => {}
				});
			},
			express_submit(){
				uni.reLaunch({
					url: './apply?id=' + this.orderid + '&refundid' + this.refundid
				})
			},
			jump(e){
				uni.reLaunch({
					url: e.currentTarget.dataset.src
				});
			},
			jumptogo() {
				if(this.refund.status == 3 || this.refund.status == 4) {
					uni.navigateTo({
						url: './apply?id=' + this.orderid
					})
				}
				return
				
			},
			shuomingIpt(e){
				this.shuoming_ctn = e.detail.value
			},
			hid_show(){
				this.show_none = 'block'
				this.show_none1 = 'none'
			},
			hid_show1(){
				this.show_none1 = 'block'
				this.show_none = 'none'
			},
			
			show_hid(index){
				console.log(index)
				// this.reason = this.arrs[index]
				this.reason = this.arrs[index]
				this.show_none = 'none'
				this.index = index
				if(index == 0 || index == 2) {
					this.yuanyin = '退款原因'
					this.shuoming = '退款说明'
					return
				}
				if(index == 1) {
					this.yuanyin = '换货原因'
					this.shuoming = '换货说明'
					return
				}
			},
			show_hid1(index){
				this.reason1 = this.arrs1[index]
				this.show_none1 = 'none'
			},
		}
	}
</script>

<style>
</style>
